{extend name="base"/}
{block name="main"}
<link rel="stylesheet" type="text/css" href="/public/css/defau.css">
<article class="cl pd-20">
    <div id="tab_demo" class="HuiTab" style="margin-top: 0px; position: relative;">
        <div class="tabBar clearfix">
            <span onclick="window.location.href='{:url('Group/group_list')}'">商品列表</span>
            <span class="current" onclick="window.location.href='{:url('Group/group_add')}'">添加商品</span>
              <a href="javascript:;" onclick="layer_show('选择商品','__CONF_SITE__admin/Bargain/returnGoodsList','800','600')" class="n_tab_add"><i class="Hui-iconfont">&#xe600;</i>从已有商品添加</a>
        </div>
    </div>
    <form action="" method="post" class="form form-horizontal" id="my_bargain">
        <input type="hidden" value="" id="goods_id">
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>商品名称：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" autocomplete="off" value="" placeholder="商品名称" class="input-text" id="group_name">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red"></span>促销语：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" autocomplete="off" value="" placeholder="促销语" class="input-text" id="brief">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red"></span>商品单位：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" autocomplete="off" value="" placeholder="商品单位" class="input-text" id="unit">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>商品主图：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <img width="120"  v-if="img_path!=''"  :src="img_path" class="thumbnail">
                <input onclick="select_img('1','zhu');" class="btn btn-default" type="button" value="选择图片">
                <div style="color: #ccc;">建议图标尺寸：300*300px</div>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>商品图集：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <img v-for="item in array_img" width="120"  :src="item.url" class="thumbnail"  style="float: left">
                <div class="clear"></div>
                <div>
                    <input onclick="select_img('5','lun');" class="btn btn-default" type="button" value="选择图片">
                    <div style="color: #ccc;">建议图标尺寸：600*300px;(注：第一张图将作为拼团首页商品图展示)</div>
                </div>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>商品分类：</label>
            <div class="formControls col-xs-8 col-sm-3">
                <span class="select-box">
                  <select class="select" size="1" id="type">
                    <option value="-1">请选择</option>
                      {volist name="group_type" id="c"}
                             <option value="{$c.id}">{$c.name}</option>
                      {/volist}
                  </select>
                </span>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>单买价：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input id="price" type="number" autocomplete="off" value="" placeholder="单买价" class="input-text">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>团购价：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input id="group_money" type="number" autocomplete="off" value="" class="input-text" placeholder="团购价">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>起团人数：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input id="group_num" type="number" autocomplete="off" value="2" class="input-text" placeholder="起团人数">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>库存：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input id="stock" type="number" autocomplete="off" value="" class="input-text" placeholder="库存" >
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red"></span>虚拟销量：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input id="sales" type="number" autocomplete="off" value="" class="input-text" placeholder="虚拟销量" >
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>组团限时：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input id="group_time" placeholder="单位（小时）" value="" class="input-text Wdate" type="text" style="width:160px;"/>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>拼团详情：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <div id="editor" type="text/plain" style="width: 50%; height: 500px;"></div>
            </div>
        </div>
        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                <input class="btn btn-primary radius" onclick="addSuppAjax()" type="button" value="提交">
            </div>
        </div>
    </form>
</article>
{/block}
{block name="script"}
<script type="text/javascript" src="/public/js/vue.js"></script>
<link href="/public/static/umedito/themes/default/_css/umeditor.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="/public/static/umedito/third-party/jquery.min.js"></script>
<script type="text/javascript" src="/public/static/umedito/third-party/template.min.js"></script>
<script type="text/javascript" charset="utf-8" src="/public/static/umedito/umeditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/public/static/umedito/_examples/editor_api.js"></script>
<script type="text/javascript" src="/public/static/umedito/lang/zh-cn/zh-cn.js"></script>
<script src="/public/menu/js/jquery.artdialog.js"></script>
<script src="/public/menu/js/iframetools.js"></script>
<script type="text/javascript">
    var bannerVM = new Vue({
        el: '#my_bargain',
        data: {
            img_path:'',//图片链接
            img_id:'',//图片ID
            array_img:[],
        }
    });
    $(function () {
        var ue =UM.getEditor('editor',{
            imageUrl:"__CONF_SITE__app/Umupload/uploadFile", //处理图片上传的接口
            imageFieldName:"upfile", //上传图片的表单的name
            imagePath: ""
        });
    })
    //模块输入信息验证
    function verify(group_name,img,details,img_arr,group_money,price,group_num,group_time,stock,type) {
        if (group_name==''){
            layer.msg('商品名称不能为空',{icon:5,time:1000});
            return false;
        }
        if (img==''){
            layer.msg('主图不能为空',{icon:5,time:1000});
            return false;
        }
        if (img_arr==''){
            layer.msg('图集不能为空',{icon:5,time:1000});
            return false;
        }
        if (type=='-1'){
            layer.msg('请选择分类',{icon:5,time:1000});
            return false;
        }
        if (group_money==''){
            layer.msg('商品价不能为空',{icon:5,time:1000});
            return false;
        }
        if (price==''){
            layer.msg('单买价格不能为空',{icon:5,time:1000});
            return false;
        }
        if (group_num==''){
            layer.msg('起团人数不能为空',{icon:5,time:1000});
            return false;
        }
        if (group_num<2){
            layer.msg('起团人数不能小于2人',{icon:5,time:1000});
            return false;
        }
        if (group_time==''){
            layer.msg('组团限时不能为空',{icon:5,time:1000});
            return false;
        }
        if (stock==''){
            layer.msg('库存不能为空',{icon:5,time:1000});
            return false;
        }
        if (details==''){
            layer.msg('商品详情不能为空',{icon:5,time:1000});
            return false;
        }
        return true;
    }
    var flag = false;//防止重复提交
    //添加用户
    function addSuppAjax() {
        var group_name = $("#group_name").val();
        var img =bannerVM.img_id;
        var type =$("#type").val();
        var details= UM.getEditor('editor').getContent();
        var img_arr= JSON.stringify(bannerVM.array_img);
        var group_money=$("#group_money").val();
        var price=$("#price").val();
        var group_num=$("#group_num").val();
        var group_time=$("#group_time").val();
        var stock=$("#stock").val();
        var sales=$("#sales").val();
        var brief=$("#brief").val();
        var unit=$("#unit").val();
        if(verify(group_name,img,details,img_arr,group_money,price,group_num,group_time,stock,type) && !flag){
            flag = true;
            $.ajax({
                type : "post",
                url : "{:url('group/group_add')}",
                data : {
                    'group_name': group_name,
                    'img': img,
                    'type': type,
                    'details': details,
                    'img_arr': img_arr,
                    'group_money': group_money,
                    'price': price,
                    'group_num': group_num,
                    'group_time': group_time,
                    'stock': stock,
                    'sales': sales,
                    'brief':brief,
                    'unit':unit
                },
                success : function(data) {
                    console.log(data);
                    if(data['code']>0){
                        layer.msg('添加成功!',{icon:1,time:1000},function () {
                            window.location.href="{:url('Group/group_list')}";
                        });
                    }
                    else{
                        flag = false;
                        layer.msg('添加失败!',{icon:5,time:1000});
                    }
                }
            });
        }
    }
    function select_img(number,type) {
        art.dialog.open(('__CONF_SITE__admin/images/dialogalbumlist&number=' + number + '&type=' + type), {
            lock : true,
            title : "我的图片",
            width : 900,
            height : 620,
            drag : false,
            background : "#000000",
            scrollbar:false,
        }, true);
    }
    //选择多张图片
    function lun_images(id_array,path_array) {
        var arr=[];
        id_array=id_array.split(",");
        path_array=path_array.split(",");
        for (var i=0;i<id_array.length;i++){
            var item={};
            item['id']=id_array[i];
            item['url']=path_array[i];
            arr.push(item);
        }
        bannerVM.array_img=arr;
    }
    //选择单张图片
    function zhu_images(id,path) {
        bannerVM.img_path=path;
        bannerVM.img_id = id;
    }
       function select_normal_goods(goods_id) {
           $.post("{:url('bargain/returnGoodsList')}",{goods_id:goods_id},
               function (data) {
                   if(data.message == '操作成功')
                   {
                       $('#group_name').val(data.code.goods_name);
                       $('#editor').html(data.code.description);
                       $('#stock').val(data.code.stock);
                       bannerVM.img_path = data.code.img_cover;
                       bannerVM.price = data.code.price;
                       bannerVM.img_id = data.code.images;
                       var img_arr = data.code.img_arr;
                       var arr=[];
                       for (var i=0;i<img_arr.length;i++){
                           var item={};
                           item['id']=img_arr[i]['img_id'];
                           item['url']=img_arr[i]['img_cover'];
                           arr.push(item);
                       }
                       bannerVM.array_img=arr;
                   }
               },"json");
       }
</script>
{/block}